#app {
  // 主体区域
  .app-wrapper-dark {
    .main-container {
      min-height: 100%;
      transition: margin-left 0.28s;
      margin-left: 240px;
      position: relative;
    }
    // 侧边栏
    .sidebar-container {
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      z-index: 1001;
      font-size: 0px;
      position: fixed;
      overflow: hidden;
      transition: width 0.28s;
      width: 240px !important;

      div.el-scrollbar {
        height: calc(100% - 120px);
        background: #304156;
      }

      .logout-wrapper {
        height: 60px;
        display: flex;
        color: #ffffff;
        background: #304156;
        align-items: center;
        justify-content: right;

        > span {
          cursor: pointer;
          padding: 10px 10px;

          svg {
            margin-right: 0;
            font-size: 22px;
          }
        }
      }

      .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
      }

      .scrollbar-wrapper {
        height: calc(100% + 15px);
        // .el-scrollbar__view {
        //   height: 100%;
        // }
      }

      .is-horizontal {
        display: none;
      }

      a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
      }

      .svg-icon {
        margin-right: 16px;
        font-size: 1.1rem;
      }

      .el-menu {
        border: none;
        width: 100%;
        height: 100%;

        span[slot="title"] {
          color: #ffffff;
        }

        .el-menu-item:not(.is-active):hover,
        .el-submenu__title:not(.is-active):hover {
          span[slot="title"] {
            color: #f2f2f2;
          }
        }

        .el-menu-item.is-active {
          background-color: #515151 !important;
          color: #fff;
        }
      }
    }
  }
  .app-wrapper-light {
    .main-container {
      min-height: 100%;
      transition: margin-left 0.28s;
      margin-left: 240px;
      position: relative;
      padding-top: 50px;
    }
    // 侧边栏
    .sidebar-container {
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      z-index: 1001;
      font-size: 0px;
      position: fixed;
      overflow: hidden;
      transition: width 0.28s;
      width: 240px !important;

      div.el-scrollbar {
        height: calc(100% - 110px);
        // background: #304156;
      }

      .logout-wrapper {
        height: 60px;
        display: flex;
        color: #ffffff;
        background: #152452;
        align-items: center;
        justify-content: right;

        > span {
          cursor: pointer;
          padding: 10px 10px;

          svg {
            margin-right: 0;
            font-size: 22px;
          }
        }
      }

      .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
      }
      .el-scrollbar {
        height: 100%;
        background-color: #14214d;
      }

      .is-horizontal {
        display: none;
      }

      a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
      }

      .svg-icon {
        margin-right: 16px;
        font-size: 1.1rem;
      }

      .el-menu {
        border: none;
        width: 100%;
        height: 100%;
        // background-color: #202a8c !important;
        background: linear-gradient(to top, #14214d, #1c2f66) !important;
        .el-sub-menu {
          .el-sub-menu__title {
            &:hover {
              background-color: #254672 !important;
            }
          }
          .el-menu-item {
            background-color: #14214d !important;
            &:hover {
              background-color: #254672 !important;
            }
          }
        }
        .el-menu-item {
          &:hover {
            background-color: #254672 !important;
          }
        }
        .el-menu-item.is-active {
          background-color: #254672 !important;
          color: #fff;
        }

        span[slot="title"] {
          color: #ffffff;
        }

        .el-menu-item:not(.is-active):hover,
        .el-submenu__title:not(.is-active):hover {
          span[slot="title"] {
            color: #f2f2f2;
          }
        }
      }
    }
  }
  .app-wrapper-gray {
    .main-container {
      min-height: 100%;
      transition: margin-left 0.28s;
      margin-left: 240px;
      position: relative;
      padding-top: 50px;
    }
    // 侧边栏
    .sidebar-container {
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      z-index: 1001;
      font-size: 0px;
      position: fixed;
      overflow: hidden;
      transition: width 0.28s;
      width: 240px !important;

      div.el-scrollbar {
        height: calc(100% - 110px);
        // background: #304156;
      }

      .logout-wrapper {
        height: 60px;
        display: flex;
        color: #ffffff;
        background: #1e282c;
        align-items: center;
        justify-content: right;

        > span {
          cursor: pointer;
          padding: 10px 10px;

          svg {
            margin-right: 0;
            font-size: 22px;
          }
        }
      }

      .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
      }
      .el-scrollbar {
        height: 100%;
        background-color: #1e282c;
      }

      .is-horizontal {
        display: none;
      }

      a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
      }

      .svg-icon {
        margin-right: 16px;
        font-size: 1.1rem;
      }

      .el-menu {
        border: none;
        width: 100%;
        height: 100%;
        background-color: #1e282c !important;
        // background: linear-gradient(to top, #14214d, #1c2f66) !important;
        .el-sub-menu {
          .el-sub-menu__title {
            &:hover {
              background-color: #2a363b !important;
            }
          }
          .el-menu-item {
            background-color: #1e282c !important;
            &:hover {
              background-color: #2a363b !important;
            }
          }
        }
        .el-menu-item {
          &:hover {
            background-color: #2a363b !important;
          }
        }
        .el-menu-item.is-active {
          background-color: #1890ff !important;
          color: #fff;
        }

        span[slot="title"] {
          color: #ffffff;
        }

        .el-menu-item:not(.is-active):hover,
        .el-submenu__title:not(.is-active):hover {
          span[slot="title"] {
            color: #f2f2f2;
          }
        }
      }
    }
  }
  .hideSidebar {
    .sidebar-container {
      width: 76px !important;

      #logo-wrapper {
        > span {
          visibility: hidden;
        }
      }

      .logout-wrapper {
        justify-content: center;
      }
    }
    .main-container {
      margin-left: 76px;

      .card-panel-text {
        display: none;
      }
    }
    .submenu-title-noDropdown {
      padding-left: 10px !important;
      position: relative;
      .el-tooltip {
        padding: 0 10px !important;
      }
    }

    .el-submenu {
      overflow: hidden;
      & > .el-submenu__title {
        padding-left: 10px !important;
        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }
    .el-menu--collapse {
      .el-submenu {
        & > .el-submenu__title {
          & > span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }
  .sidebar-container .hangar-menu .el-submenu > .el-submenu__title,
  .sidebar-container .el-submenu .el-menu-item {
    min-width: 180px !important;
    background-color: $subMenuBg !important;
    &:hover {
      background-color: $menuHover !important;
    }
  }
  .el-menu--collapse .el-menu .el-submenu {
    min-width: 180px !important;
  }

  //适配移动端
  .mobile {
    //.main-container {
    //  margin-left: 0px;
    //}
    //.sidebar-container {
    //  transition: transform .28s;
    //  width: 180px !important;
    //}
    //&.hideSidebar {
    //  .sidebar-container {
    //    transition-duration: 0.3s;
    //    transform: translate3d(-180px, 0, 0);
    //  }
    //}
  }
  .withoutAnimation {
    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}
